<!--
 * @Author: your name
 * @Date: 2021-08-27 16:16:47
 * @LastEditTime: 2021-09-08 16:35:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-ketang-pc-mis\src\views\MallOrder\components\Deliver.vue
-->
<template>
  <div class="deliver">
    <el-form
      :model="info"
      :rules="getDeliverRule"
      label-width="80px"
      label-position="right"
      ref="getDeliverForm"
    >
      <h3>收货信息</h3>
      <p>联系人:{{ info ? info.receiver : '' }}</p>
      <p>联系方式:{{ info ? info.receiverPhone : '' }}</p>
      <p>收货地址:{{ info ? info.receiverAddress : '' }}</p>
      <h3>发货配置</h3>
      <el-form-item prop="companyCode" label="配送快递" v-if="info">
        <mall-order-k-d-sl v-model="info.companyCode"></mall-order-k-d-sl>
      </el-form-item>
      <el-form-item prop="logisticNo" label="快递单号" v-if="info">
        <p style="color:#F56C6C">注意：实物订单将在首次发货14天后自动确认收货</p>
        <el-input placeholder="请输入快递单号" v-model="info.logisticNo"></el-input>
      </el-form-item>
    </el-form>
    <div class="after-box">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="saveLoading">发 货</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['info'],
    data() {
      return {
        // 发货配置验证规则
        getDeliverRule: {
          logisticNo: [
            {
              type: 'string',
              required: true,
              message: '该项为必填项',
              trigger: 'blur',
            },
          ],
        },
        // 保存loading
        saveLoading: false,
      };
    },
    mounted() {
      console.log(this.info)
    },
    methods: {
      i_update(){
        this.$forceUpdate()
      },
      // 关闭
      close() {
        this.$emit('dialogCancel');
      },
      // 保存
      save() {
        this.$refs.getDeliverForm.validate((valid) => {
          if (valid) {
            this.saveLoading = true
            this.$service
              .MallOrderDeliver({ ...this.info })
              .then((res) => {
                this.saveLoading = false
                this.$emit('dialogSubmit');
                this.$message.success('保存成功！')
              });
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .deliver {
    .after-box {
      text-align: right;
    }
  }
</style>
